<template>
  <div class="home">
    <div class="search">
      <el-input class="search_input" placeholder="请输入名称" v-model="params.name"></el-input>
      <el-input class="search_input" placeholder="请输入手机" v-model="params.phome"></el-input>
      <el-button type="primary" icon="el-icon-search" @click="load">搜索</el-button>
      <el-button type="warning" icon="el-icon-search" @click="clearSearch">清空</el-button>
    </div>

    <el-table :data="tableData">
      <el-table-column prop="name" label="姓名">
      </el-table-column>
      <el-table-column prop="username" label="会员号">
      </el-table-column>
      <el-table-column prop="age" label="年龄">
      </el-table-column>
      <el-table-column prop="sex" label="性别">
      </el-table-column>
      <el-table-column prop="phone" label="电话">
      </el-table-column>
      <el-table-column prop="address" label="地址">
      </el-table-column>
      <el-table-column prop="account" label="所持积分">
      </el-table-column>
      <el-table-column prop="createtime" label="创建时间">
      </el-table-column>
      <el-table-column prop="updatetime" label="更新时间">
      </el-table-column>
      <el-table-column width="300" label="操作">
        <template v-slot="scope">
          <el-button size="mini" type="warning" @click="handleAccount(scope.row)">充值</el-button>
          <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
            当前积分 <el-input v-model="form.account" style="width:200px" :disabled="true"></el-input>
            <br>
            充值金额 <el-input-number v-model="newaccount" :min="1" label="描述文字"></el-input-number>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="createAccount">确 定</el-button>
            </span>
          </el-dialog>

          <el-button class="button-left-margin" size="mini" type="primary"
            @click="$router.push('/layout/edit-user?id=' + scope.row.id)">修改
          </el-button>
          <template>
            <el-popconfirm title="确定删除吗？" @confirm="del(scope.row.id)">
              <el-button class="button-left-margin" size="mini" type="danger" slot="reference">删除</el-button>
            </el-popconfirm>
          </template>
        </template>
      </el-table-column>
    </el-table>

    <div class="page">
      <el-pagination :page-size="params.pageSize" :current-page="params.pageNum" @current-change="changeCurrentPage"
        background layout="prev, pager, next" :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
      tableData: [],
      total: 0,
      dialogVisible: false,
      params: {
        name: '',
        phone: '',
        pageNum: 1,
        pageSize: 5,
      },
      form: {},
      newaccount: ''
    }
  },
  created() {
    this.load();
  },
  methods: {
    load() {
      this.request.get("/api/user/page", { params: this.params }).then(res => {
        if (res.code === '200') {
          this.tableData = res.data.list;
          console.log(this.tableData)
          this.total = res.data.total;
        }
      })
    },
    changeCurrentPage(index) {
      this.params.pageNum = index;
      this.load();
    },
    del(id) {
      this.request.delete("/api/user/delete/" + id).then(res => {
        if (res.code === '200') {
          this.$notify.success("删除成功");
          this.params.pageNum = 1;
          this.load();
        }
      })
    },
    clearSearch() {
      this.params = {};
    },
    handleAccount(row) {
      this.dialogVisible = true;
      this.form = JSON.parse(JSON.stringify(row));
    },
    createAccount() {
      if (!this.newaccount) {
        return;
      }
      this.form.account += this.newaccount;
      console.log(this.form);

      this.request.put("/api/user/update", this.form).then(res => {
        if (res.code === '200') {
          this.$notify.success("充值成功");
        } else {
          this.$notify.error("充值失败");
        }

        this.dialogVisible = false;
        this.load();

        this.form = {};
      });
    }
  }
}
</script>


<style lang="scss" scoped>
.home {
  .search {
    display: flex;
    margin: 10px 0;

    .search_input {
      width: 20%;
      margin-right: 10px;
    }
  }

  .page {
    display: flex;
    justify-content: center;
    margin: 20px 0;
  }
}

.button-left-margin {
  margin-left: 10px;
}
</style>